import React, { useEffect, useMemo, useState } from 'react';
import './index.less';
import { Button, Input, Select, Space } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import Title from 'components/title';
export default React.memo((props: any) => {
    console.log('render setting');
    const [folderName, setFolderName] = useState('');
    const { settings, setSettings, video } = props;
    const disabled = useMemo(() => props.status === 'ing', [props.status])
    useEffect(() => {
        setFolderName(video?.name);
    }, [video]);
    const start = () => {
        props.setStatus('ing');
    };
    const stop = () => {
        props.setStatus('');
    };
    return (
        <Space className="setting" direction="vertical" size={20}>
            <Title text="捕获设置" />
            <div>1. 区域范围</div>
            <div>
                <Input
                    type="number"
                    max={720}
                    min={100}
                    value={settings.width}
                    onChange={(e) =>
                        setSettings({
                            ...settings,
                            width: Number(e.target.value),
                        })
                    }
                    className="mr20"
                    style={{ width: 100 }}
                    disabled={disabled}
                />
                <CloseOutlined className="mr20" />
                <Input
                    max={480}
                    min={60}
                    type="number"
                    value={props.settings.height}
                    onChange={(e) =>
                        setSettings({
                            ...settings,
                            height: Number(e.target.value),
                        })
                    }
                    style={{ width: 100 }}
                    disabled={disabled}
                />
            </div>
            <div>
                <span className="mr20">2. 时间间隔</span>
                <Select defaultValue={1} style={{ width: 150 }} disabled={disabled}>
                    <Select.Option value={1}>1秒</Select.Option>
                </Select>
            </div>
            <div>3. 目标文件夹</div>
            <div>
                <Input
                    value={folderName}
                    onChange={(e) => setFolderName(e.target.value)}
                    className="mr20"
                    style={{ width: 300 }}
                    disabled={disabled}
                />
                <span>+日期（时分）</span>
            </div>
            {disabled ? (
                <Button type="primary" onClick={stop} danger>
                    停止捕获
                </Button>
            ) : (
                <Button type="primary" onClick={start}>
                    开始捕获
                </Button>
            )}
        </Space>
    );
});
